<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>#option("site_name")</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">

<link rel="shortcut icon" href="#option('site_icon')" />
<link rel="bookmark" href="#option('site_icon')" />

<link rel="stylesheet" href="#(ctx)/manage/_assets/libs/layui/css/layui.css?__v=#(site_version)" media="all">
</head>
<style type="text/css">
.layui-header .layui-nav .layui-nav-item a{padding: 0 30px;}
#ID_animation-left-nav{font-size: 18px;}
</style>
<body class="layui-layout-body">
	<div class="layui-layout layui-layout-admin">
		<div class="layui-header layui-bg-black">
			<div class="layui-logo"><img alt="#option('site_name')" src="#option('site_logo')"></div>

			<!-- 头部区域水平导航 -->
			<ul class="layui-nav layui-layout-left">
				<li class="layui-nav-item layadmin-flexible"><a href="javascript:;" id="ID_animation-left-nav" class="layui-icon layui-icon-shrink-right"></a></li>
				<li class="layui-nav-item"><a href="javascript:clearCache();"><i class="layui-icon layui-icon-delete"></i>&nbsp;&nbsp;清除缓存</a></li>
				<li class="layui-nav-item"><a href="#(ctx)/" target="_blank"><i class="layui-icon layui-icon-website"></i>&nbsp;&nbsp;网站首页</a></li>
			</ul>
			<ul class="layui-nav layui-layout-right">
				<li class="layui-nav-item">
					<a href="javascript:;"><i class="layui-icon layui-icon-username"></i>&nbsp;&nbsp;#(CURRENT_ADMIN.name??)</a>
					<dl class="layui-nav-child">
						<dd>
							<a class="site-menu-active" data-type="tabAdd" data-url="#(ctx)/manage/admin/changePassword" data-id="changePassword" data-title="修改密码" data-icon="layui-icon-password" href="#"><i class="layui-icon layui-icon-password"></i>&nbsp;&nbsp;修改密码</a>
						</dd>
						<dd>
							<a class="site-menu-active" data-type="tabAdd" data-url="#(ctx)/manage/admin/baseInfo" data-id="myInfo" data-title="基本资料" data-icon="layui-icon-username" href="#"><i class="layui-icon layui-icon-username"></i>&nbsp;&nbsp;基本资料</a>
						</dd>
					</dl>
				</li>
				<li class="layui-nav-item">
					<a href="javascript:;"><i class="layui-icon layui-icon-tabs"></i>&nbsp;&nbsp;页面模式</a>
					<dl class="layui-nav-child">
						<dd>
							<a href="javascript:switchSingleTab(true);"><i id="ID_single_mode_true" class="layui-icon layui-icon-ok"></i>&nbsp;&nbsp;单页模式</a>
						</dd>
						<dd>
							<a href="javascript:switchSingleTab(false);"><i id="ID_single_mode_false" class="layui-icon layui-icon-ok"></i>&nbsp;&nbsp;多页模式</a>
						</dd>
					</dl>
				</li>
				<li class="layui-nav-item">
					<a href="#(ctx)/manage/login/logout"><i class="layui-icon layui-icon-close-fill"></i>&nbsp;&nbsp;退出</a>
				</li>
			</ul>
		</div>

		<div class="layui-side layui-bg-black">
			<div class="layui-side-scroll">
				<!-- 左侧导航区域 -->
				<ul class="layui-nav layui-nav-tree layui-bg-black" lay-shrink="all" lay-filter="left_menu">
				#for(topMenu : menuList)
					#if(topMenu.parentId == 0)
					<li class="layui-nav-item #if(for.index == 0) layui-nav-itemed #end">
						<a href="javascript:;" >#if(topMenu.icon)<i class="layui-icon #(topMenu.icon)"></i>#end&nbsp;&nbsp;<b>#(topMenu.name)</b></a>
						<dl class="layui-nav-child">
						#for(subMenu : menuList)
							#if(subMenu.parentId == topMenu.id)
							<dd>
								<a class="site-menu-active" data-type="tabAdd" data-url="#(ctx)#(subMenu.value)" data-id="#(subMenu.id)" data-title=" #(subMenu.name)" data-icon="#(subMenu.icon)" href="#">
								#if(subMenu.icon)<i class="layui-icon #(subMenu.icon)" style="color: green;"></i>#end&nbsp;&nbsp;#(subMenu.name)
								</a>
							</dd>
							#end
						#end
						</dl>
					</li>
					#end
				#end
				</ul>
			</div>
		</div>
		<div class="layui-body">
			<div class="layui-tab layui-tab-card" lay-unauto lay-filter="mainTab" lay-allowclose="true" style="margin: 0px">
				<ul class="layui-tab-title">
					<li class="layui-this LAY-unclose" lay-id="0"><i class="layui-icon layui-icon-console" style="color: green; font-size: 22px"></i></li>
				</ul>

				<div class="layui-tab-content" style="padding: 0; margin: 0">
					<div class="layui-tab-item layui-show">
						<iframe data-frameid="0" frameborder="0" src="#(ctx)/manage/dashboard" style="width:100%;height:100%"></iframe>
					</div>
				</div>
			</div>

			<div class="layui-footer ">
				<p>
					<a href="https://gitee.com/gollyhu/JFSimpleAdmin" target="_blank">
						<img style="max-height: 24px" src="https://gitee.com/logo-black.svg">
					</a>
					<a style="padding-left: 40px" href="https://my.oschina.net/u/1175852" target="_blank">© 2018 Golly Apache v2 License</a>
					<a style="padding-left: 20px" href="mailto:3722711@qq.com">联系：3722711@qq.com</a>
				</p>
			</div>
		</div>
	</div>
<script src="#(ctx)/manage/_assets/libs/layui/layui.js?__v=#(site_version)" charset="utf-8"></script>
#include("_common/_import_cookie.html")
<script>
var $ = null, layer = null, element = null, active = null, singleTab = true, singleTabId="single";
layui.use(['jquery', 'element', 'layer', 'form'], function() {
	$ = layui.jquery, layer = layui.layer, element = layui.element, form = layui.form; ### Tab的切换功能，切换事件监听等，需要依赖element模块

	$(".LAY-unclose .layui-tab-close").css('display','none'); ### 隐藏掉Tab中Home页面的关闭按钮

	### 触发事件
	active = {
		### 在这里给active绑定几项事件，后面可通过active调用这些事件
		tabAdd: function(url, id, name, icon) {
			addTab(url, id, name, icon);
		},
		tabChange: function(id) {
			### 切换到指定Tab项
			element.tabChange('mainTab', id); ### 根据传入的id传入到指定的tab项
		},
		tabDelete: function (id) {
			element.tabDelete("mainTab", id); ### 删除
		},
		tabDeleteAll: function () { ### 删除所有
			$.each($(".layui-tab-title li[lay-id]"), function () {
				if($(this).attr("lay-id") != '0'){
					active.tabDelete($(this).attr("lay-id"));
				}
			})
		},
		switchSingleTab: function(single){
			singleTab = single;
			if(single){
				$("#ID_single_mode_true").removeClass("layui-hide");
				$("#ID_single_mode_false").addClass("layui-hide");
			} else {
				$("#ID_single_mode_true").addClass("layui-hide");
				$("#ID_single_mode_false").removeClass("layui-hide");
			}

			Jfsa.setCookie("cookieSingleTab", "" + single, 30);
			active.tabDeleteAll();
		}
	};

	### 当点击有site-menu-active属性的标签时，即左侧菜单栏中内容 ，触发点击事件
	$('.site-menu-active').on('click', function() {
		var dataid = $(this);
		var tabId = singleTab ? singleTabId : dataid.attr("data-id");

		### 这时会判断右侧.layui-tab-title属性下的有lay-id属性的li的数目，即已经打开的tab项数目
		if ($(".layui-tab-title li[lay-id]").length <= 0) {
			### 如果比零小，则直接打开新的tab项
			active.tabAdd(dataid.attr("data-url"), tabId, dataid.attr("data-title"),dataid.attr("data-icon"));
		} else {
			### 否则判断该tab项是否以及存在
			var isData = false; ### 初始化一个标志，为false说明未打开该tab项 为true则说明已有
			$.each($(".layui-tab-title li[lay-id]"), function () {
				### 如果点击左侧菜单栏所传入的id 在右侧tab项中的lay-id属性可以找到，则说明该tab项已经打开
				if ($(this).attr("lay-id") == tabId) {
					isData = true;
				}
			})
			if (isData == false) {
				### 标志为false 新增一个tab项
				active.tabAdd(dataid.attr("data-url"), tabId, dataid.attr("data-title"),dataid.attr("data-icon"));
			}
		}
		### 最后不管是否新增tab，最后都转到要打开的选项页面上
		if(singleTab){
			active.tabDeleteAll();
			active.tabAdd(dataid.attr("data-url"), tabId, dataid.attr("data-title"),dataid.attr("data-icon"));
		}
		active.tabChange(tabId);
	});

	$(window).resize(function () {
		FrameWH();
	})

	FrameWH();

	function addTab(url,id,name,icon){
		### 新增一个Tab项 传入三个参数，分别对应其标题，tab页面的地址，还有一个规定的id，是标签中data-id的属性值
		### 关于tabAdd的方法所传入的参数可看layui的开发文档中基础方法部分
		var nameWithIcon = "";
		if(icon){
			nameWithIcon += '<i class="layui-icon ' + icon + '" style="font-size: 18px"></i>&nbsp;&nbsp;'
		}
		nameWithIcon += name;
		element.tabAdd('mainTab', {
			title: '' + nameWithIcon,
			content: '<iframe data-frameid="'+id+'" scrolling="auto" frameborder="0" src="'+url+'" style="width:100%;height:99%;"></iframe>',
			id: id ### 规定好的id
		})
		FrameWH();	### 计算ifram层的大小
	}

	var toggle = 0;
	### 通过图标id来触发左侧导航栏收缩功能动画效果
	$('#ID_animation-left-nav').click(function(){
		### 这里定义一个全局变量来方便判断动画收缩的效果,也就是放在最外面
		if(toggle==0){
			$(".layui-side").animate({width:'toggle'});
			$(".layui-body").animate({left:'0px'});
			$(this).removeClass("layui-icon-shrink-right");
			$(this).addClass("layui-icon-spread-left");
			toggle++;
		}else{
			$(".layui-side").animate({width:'toggle'});
			$(".layui-body").animate({left:'200px'});
			$(this).removeClass("layui-icon-spread-left");
			$(this).addClass("layui-icon-shrink-right");
			toggle--;
		}
	});
	### 左侧导航栏收缩提示
	$('#ID_animation-left-nav').hover(function(){
		layer.tips('收缩左侧导航栏', '#ID_animation-left-nav', {tips:[4,'#FF8000'],time:0});
	},function(){
		layer.closeAll('tips');
	});

	### 从Cookie中取得数据，设置单页模式初始状态
	var cookieSingleTab = Jfsa.getCookie("cookieSingleTab");
	if(cookieSingleTab == 'false'){
		singleTab = false;
	} else {
		singleTab = true;
	}
	active.switchSingleTab(singleTab);

	element.on('tab(mainTab)', function(data){
		console.log(this); //当前Tab标题所在的原始DOM元素
		console.log(data.index); //得到当前Tab的所在下标
		console.log(data.elem); //得到当前的Tab大容器
	});
});

function FrameWH() {
	var h = $(window).height() -41-10-60-10-30;
	$("iframe").css("height", h + "px");
}

function switchSingleTab(single){
	if(active != null){
		active.switchSingleTab(single);
	}
}

function clearCache(){
	layui.$.ajax({
		url : '#(ctx)/manage/ajaxClearCache',
		type : "get",
		success : function(ret){
			if(ret.code == 0){
				layer.alert("操作成功！", {icon: 1});
			} else {
				if(ret.msg){
					layer.alert(ret.msg);
				} else {
					layer.alert("操作失败！", {icon: 2});
				}
			}
		},
		error : function (e) {
			layer.alert("调用失败：" + e.responseText, {icon: 2});
		}
	});
}
</script>
</body>
</html>